<template>
  <div class="page-box" v-show="form.isend_base">
    <el-form :model="form" label-width="100px" class="form-box">
      <el-form-item label="规格类型">
        <el-radio-group v-model="form.spec_type">
          <el-radio :label="0">单规格</el-radio>
          <el-radio :label="1">多规格</el-radio>
          <el-select v-model="form.tpl_id" placeholder="模板选择" @change="tplChange" v-if="form.spec_type == '1'">
            <el-option v-for="item in rulList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-radio-group>
      </el-form-item>

      <div v-if="form.spec_type == '0'">
        <el-form-item label="售价">
          <number-input-with-unit v-model="form.price" unit="元" :min="0" :max="100000" container-width="280px" />
        </el-form-item>

        <el-form-item label="划线价">
          <number-input-with-unit v-model="form.market_price" unit="元" :min="0" :max="100000" container-width="280px" />
        </el-form-item>

        <el-form-item label="库存">
          <number-input-with-unit v-model="form.stock" unit="件" :min="0" :max="100000" container-width="280px" />
        </el-form-item>

        <el-form-item label="重量">
          <number-input-with-unit v-model="form.weight" unit="kg" :min="0" :max="10" container-width="280px" />
        </el-form-item>
        <el-button type="primary" @click="submitData" class="bt-fix"> 下一步 </el-button>

      </div>

      <div v-if="form.spec_type == '1'">
        <sku :specs="specs" :skuData="form.sku_object" @skuRulChange="skuRulChange"></sku>
      </div>

    </el-form>




  </div>
</template>

<script>
  import sku from '@/components/goods/goodsSkuFull.vue'
  import NumberInputWithUnit from '@/components/NumberInputWithUnit.vue';

  export default {
    props: {
      form: Object
    },
    components: {
      NumberInputWithUnit,
      sku
    },
    data() {
      return {
        rulList: [],
        specs: [],


      }
    },
    mounted() {
      this.setProductOption()
    },

    methods: {

      submitData() {
        let goodsData = {}
        goodsData.sign = '2';
        this.form.isend_spec = true;
        goodsData.form = this.form;
        console.log('send------2', goodsData)
        this.$emit('formChange', goodsData)
      },

      setProductOption() {
        let url = '/product/rule/option'
        this.$http.get(url).then(res => {
          console.log('-----/product/rule/option----', res.data)
          this.rulList = res.data

        }).catch(e => {
          this.$message.error(e.message);
        });
      },

      skuRulChange(data) {
        let goodsData = {}
        goodsData.sign = '2';
        goodsData.form = this.form;
        goodsData.form.sku_object = data;
        goodsData.form.isend_spec = true;
        this.$emit('formChange', goodsData)

      },

      tplChange(index) {
        console.log('tpl------change', index)
        this.specs = this.rulList[index].obj_value
        console.log('tpl------this.specs', this.specs)
      }
    }
  }
</script>

<style>
  .form-box {
    padding-top: 30px;
  }

  .custom-input {
    width: 300px;
  }

  .label-box {
    margin-top: 30px;
  }

  .vertical-center-form {}

  .vertical-center-form .el-form-item__label {
    line-height: 130px !important;
  }

  .vertical-center-form2 .el-form-item__label {
    line-height: 100px !important;
  }

  .el-tabs__item {
    font-size: 18px !important;
  }

  .ml-2 {
    margin-left: 20px;
  }

  .el-tabs__active-bar {
    width: 74px !important;

  }
</style>
